<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h1 class="info">登录密码</h1>
      </div>
    </template>
    <div class="registerwin">
      <div class="h">请设置新密码</div>
      <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules" :size="formSize" status-icon>
        <div class="registerform">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="用户名" prop="username">
                <el-input disabled v-model="username" class="input" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" placeholder="请输入密码" class="input" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="form.checkPass" placeholder="确认密码" class="input" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="onSave(ruleFormRef)" :disabled="isSaveButtonDisabled" style="margin-top: 15px">保存</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </el-card>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import $axios from '../components/utils/axios'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'

const form = ref({
  password: '',
  checkPass: ''
})
form.value.id = sessionStorage.getItem('id')
const username = ref('')
username.value = JSON.parse(sessionStorage.getItem('user')).name

const formSize = ref('default')
const ruleFormRef = ref()
const router = useRouter()

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入确认密码！'))
  } else if (value !== form.value.password) {
    callback(new Error('确认密码与密码不匹配！'))
  } else {
    callback()
  }
}

const rules = reactive({
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 5,
      max: 10,
      message: '5-10个字符',
      trigger: 'blur'
    }
  ],
  checkPass: [{ validator: validatePass2, required: true, trigger: 'blur' }]
})

const isSaveButtonDisabled = computed(() => {
  const passwordValid = form.value.password.length >= 5 && form.value.password.length <= 10
  const checkPassValid = form.value.checkPass.length >= 5 && form.value.checkPass.length <= 10
  return !form.value.password || !form.value.checkPass || form.value.password !== form.value.checkPass || !passwordValid || !checkPassValid
})

const onSave = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const path = '/api/supervisor/updatePassword'
      const { data: res } = await $axios.post(path, form.value)
      if (res.code === '00000') {
        ElNotification({
          title: '成功',
          message: '已成功修改登录密码。',
          type: 'success'
        })
        router.push('/')
      } else if (res.code === 103) {
        ElNotification({
          title: '失败',
          message: '未知原因，修改失败！',
          type: 'error'
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style scoped>
.box-card {
  width: 95%;
  height: auto;
  margin-top: 12px;
  border-radius: 12px;
  padding: 20px;
  background: #f0f8ff;
}

.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;

  /* .info {
    font-size: 24px;
    color: #4682b4;
  } */
}

.h {
  font-size: 25px;
  margin-top: 15px;
  margin-left: 25px;
}

.registerform {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

.input {
  width: 90%;
}

.el-row {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>
